/*
 * @Author: Haochen
 * @Date: 2021-11-19 18:11:42
 * @LastEditTime: 2021-11-28 23:25:00
 * @FilePath: \front\src\js\index.js
 */
import $ from './jquery-3.6.0.min.js';
import '../scss/common.scss';
import '../scss/index.scss';
import {
  backToIndex,
  getPromiseForUploadImg,
  getPromise,
  getPromiseAuthBy,
} from './common';

backToIndex();
// * 控制通知中心显示信息模态框
$('body').on('click', '.ntf-list li:not(:eq(0)) .ntf-info', function () {
  $('.ntf-modal').css('display', 'flex');
});

// * 关闭按钮功能
$('body').on('click', 'button.close', function () {
  $(this).parent().hide();
});

// * 下拉菜单（全部、未读、已读）显示和隐藏
$('.dropdown').mouseover(function () {
  $('.drop-list').show();
});
$('.dropdown').mouseout(function () {
  $('.drop-list').hide();
});

$(function () {
  $('.user').click(async function () {
    $('.user-modal').show();

    const users = JSON.parse(localStorage.getItem('users'));

    const userId = users.find((user) => user.status === 'online')._id;

    const token = localStorage.token;

    if (token) {
      let { code, user, message } = await getPromiseAuthBy(
        '/students/:' + userId,
        token,
        'get',
        {}
      );

      let flagM = '',
        flagF = '';
      user = user[0];
      //判断性别并选中
      if (user.gender == '男') {
        flagM = 'checked';
      } else if (user.gender == '女') {
        flagF = 'checked';
      }

      // 渲染用户数据
      $('.u-main').html(`
          <li>
                    <input id="userphone" type="text" value=${user.phone} disabled>
                    &nbsp;*手机号暂时不允许修改，如需修改，请联系我们
                </li>
                <li>
                    <img id="img-upload" src="${user.avatar}" alt="">
                    <input type="file" id="file-upload-img">
                </li>
                <li><input type="text" value="${user.name}" id="username"></li>
                <li>
                    <div class="radio-box">
                        <input type="radio" name="sex" id="radio-male" value="男" ${flagM}>
                        <label for="radio-male">男</label>
                 
                        <input type="radio" name="sex" id="radio-female" value="女" ${flagF}>
                        <label for="radio-female">女</label>
                    </div>

                </li>
                <li>
                    <div class="cb-box">
                        <input type="checkbox" name="department" id="cb-office" value="办公室">
                        <label for="cb-office">办公室</label>
                    
                  
                        <input type="checkbox" name="department" id="cb-info-centre" value="信息中心">
                        <label for="cb-info-centre">信息中心</label>
                    
                    
                        <input type="checkbox" name="department" id="cb-base-dept" value="基础部">
                        <label for="cb-base-dept">基础部</label>
                    </div>

                </li>

    `);

      // 判断部门并选中
      switch (user.dept) {
        case '办公室':
          $('#cb-office').prop('checked', 'true');
          break;
        case '信息中心':
          $('#cb-info-centre').prop('checked', 'true');
          break;
        case '基础部':
          $('#cb-base-dept').prop('checked', 'true');
          break;
      }

      $('#file-upload-img').change(async function () {
        let file = this.files[0];

        let fd = new FormData();
        fd.append('file', file);

        const { message, data, code } = await getPromiseForUploadImg(fd);

        console.log(message);
        $('#img-upload').attr('src', `http://localhost:10088/${data}`);
        $('#submit-user-change').attr(
          'data-src',
          `http://localhost:10088/${data}`
        );
      });

      $('input[type="checkbox"]').click(function () {
        $(this).siblings().prop('checked', false);
        $(this).prop('checked', true);
        // console.log($(this).is(':checked'));
        // console.log($(this).siblings('input').get(0));
      });

      // $('input[id^="radio-"]').click(function () {
      //   console.log($(this).is(':checked'));
      //   console.log($(this).siblings('input').is(':checked'));
      // });
    } else {
      alert('请先登录');
      location.href = './login.html';
    }
  });

  async function checkTestedAndRender() {
    const users = JSON.parse(localStorage.getItem('users'));

    const userId = users.find((user) => user.status === 'online')._id;

    let { code, data, message } = await getPromise(
      '/testedsRouter/:' + userId,
      'get',
      {}
    );

    $('#num-questions').text(data.length * 5);

    data = data[data.length - 1];

    $('#exam-score').text(`${data.score}分`);
  }

  checkTestedAndRender();

  $('#submit-user-change').click(async function () {
    const users = JSON.parse(localStorage.getItem('users'));
    const userId = users.find((user) => user.status === 'online')._id;

    let gender = '';
    $('input[id^="radio-"]').each(function () {
      if ($(this).is(':checked')) {
        gender = $(this).val();
      }
    });

    let dept = '';
    $('input[id^="cb-"]').each(function () {
      if ($(this).is(':checked')) {
        dept = $(this).val();
      }
    });

    const newInfo = {
      id: userId,
      avatar: $('#img-upload').attr('src'),
      gender,
      name: $('#username').val(),
      dept,
    };

    const token = localStorage.token;

    const { code, data, message } = await getPromiseAuthBy(
      '/students/change',
      token,
      'post',
      newInfo
    );

    alert(message);
    $('.user-modal').hide();
    location.reload();
  });

  $('[class^="option-"]').click(function () {
    const index = $(this).attr('class').substr(-1);

    switch (index) {
      case '1':
        location.href = `./exam.html?type=formal`;
        break;
      case '2':
        location.href = `./exam.html?type=mock`;
        break;
      case '3':
        location.href = `./exam.html?type=quiz`;
        break;
      case '4':
        location.href = `./exam.html?type=circular`;
        break;
      case '5':
        location.href = `./exam.html?type=category`;
        break;
    }
  });

  $('[class^="tab-"]').click(function () {
    $(`[class^="mb-bottom-"]`).hide();

    let index = $(this).attr('class').substr(-1);

    $('[class^="tab-"]').removeClass('tab-selected');

    $(this).addClass('tab-selected');

    $(`[class="mb-bottom-${index}"]`).css('display', 'flex');
  });

  $('#logoff').click(function () {
    const users = JSON.parse(localStorage.getItem('users'));
    const liveUser = users.find((user) => user.status === 'online');
    liveUser.status = 'offline';
    users.map((user) => {
      if (user._id === liveUser._id) {
        return liveUser;
      }
    });
    localStorage.setItem('users', JSON.stringify(users));
    localStorage.token = '';

    if (!localStorage.token) {
      alert('请先登录');

      location.href = './login.html';
    }
  });
});

// * 首页收藏功能
$('.tabs [class^="tab-"]:eq(1)').click(async function () {
  getCollectionsAndRender();
});

async function getCollectionsAndRender() {
  $('.mb-bottom-2 .content .content-question').html('');
  $('.mb-bottom-2 .sidebar .sb-box-2').html('');

  const users = JSON.parse(localStorage.getItem('users'));
  const userId = users.find((user) => user.status === 'online')._id;

  let {
    code,
    data: collections,
    message,
  } = await getPromise('/collectionsRouter/:' + userId, 'get', {});

  const totalCollections = collections.length;

  // * 渲染总收藏数
  $('.num-collected-questions').text(totalCollections);
  for (let i = 0; i < totalCollections; i++) {
    $('.mb-bottom-2 .sb-box-2').append(
      `<div class="rect-box" boxnum="${i}">${i + 1}</div>`
    );
  }

  collections = collections.map((collection) => {
    switch (collection.errorId.errorAnswer) {
      case -1:
        collection.errorId.errorAnswer = '空';
        return collection;
      case 0:
        collection.errorId.errorAnswer = 'A';
        return collection;
      case 1:
        collection.errorId.errorAnswer = 'B';
        return collection;
      case 2:
        collection.errorId.errorAnswer = 'C';
        return collection;
      case 3:
        collection.errorId.errorAnswer = 'D';
        return collection;
    }
  });

  collections = collections.map((collection) => {
    switch (collection.exerciseId.answer) {
      case 0:
        collection.exerciseId.answer = 'A';
        return collection;
      case 1:
        collection.exerciseId.answer = 'B';
        return collection;
      case 2:
        collection.exerciseId.answer = 'C';
        return collection;
      case 3:
        collection.exerciseId.answer = 'D';
        return collection;
    }
  });

  // console.log(collections);

  for (let i = 0; i < totalCollections; i++) {
    $('.mb-bottom-2 .content .content-question').append(`

         <div class="question-context" order="${i}" exercise-id="${collections[i].exerciseId._id}" test-id="${collections[i].testId._id}" error-id="${collections[i].errorId._id}">

            <h5 class="question-text">
                ${collections[i].exerciseId.topics}
            </h5>
                    <ul class="answers">
                        <li answerIndex="0">
                            <div class="circle-box">A</div>
                            <span class="answer-text">${collections[i].exerciseId.options[0]}</span>
                        </li>
                        <li answerIndex="1">
                            <div class="circle-box">B</div>
                            <span class="answer-text">${collections[i].exerciseId.options[1]}</span>
                        </li>
                        <li answerIndex="2">
                            <div class="circle-box">C</div>
                            <span class="answer-text">${collections[i].exerciseId.options[2]}</span>
                        </li>
                        <li answerIndex="3">
                            <div class="circle-box">D</div>
                            <span class="answer-text">${collections[i].exerciseId.options[3]}</span>
                        </li>
                    </ul>

                     <div class="question-detail">
                        <ul id="qd-items">
                            <li>考生答案：</li>
                            <li>正确答案：</li>
                            <li>解析：</li>
                        </ul>
                        <ul>
                            <li class='user-answer wrong'>${collections[i].errorId.errorAnswer}</li>
                            <li class="correct-answer correct">${collections[i].exerciseId.answer}</li>
                            <li>
                                ${collections[i].exerciseId.analysis}
                            </li>
                        </ul>
                     </div>

        </div>

        

      `);
  }

  $('.mb-bottom-2 .content .content-question').append(`
        <div class="cq-box">
          <div class="cq-row-2">
              <button class="btn-cancel-collection">取消收藏</button>
            
              <button class="btn-last-question">上一题</button>
              <button class="btn-next-question">下一题</button>
          </div>
      </div>`);

  $(
    '.mb-bottom-2 .content .content-question .question-context:not(:eq(0))'
  ).hide();

  toShowAnalysis2();

  let cur_i = $(
    `.mb-bottom-2 .content .content-question .question-context:visible`
  ).attr('order'); // * 当前所在题目的下标

  $(`.mb-bottom-2 .sb-box-2 .rect-box`).removeClass('box-selected');
  $(`.mb-bottom-2 .sb-box-2 .rect-box:eq(${cur_i})`).addClass('box-selected');

  // * 跳到指定题目
  $('body').on('click', '.mb-bottom-2 .sb-box-2 .rect-box', function () {
    //   cur_i = parseInt($(`.question-context:visible`).attr('order'));

    cur_i = parseInt($(this).attr('boxnum')); // 点击右侧边栏的小盒子所对应的题目下标

    $(`.mb-bottom-2 .content .content-question .question-context`).hide();
    $(
      `.mb-bottom-2 .content .content-question .question-context:eq(${cur_i})`
    ).fadeIn(200);

    $(`.mb-bottom-2 .sb-box-2 .rect-box`).removeClass('box-selected');
    $(`.mb-bottom-2 .sb-box-2 .rect-box:eq(${cur_i})`).addClass('box-selected');

    toShowAnalysis2();
  });

  // * 跳到下一题
  // let clickCount = 0;
  $('.mb-bottom-2 .btn-next-question').click(function () {
    // console.log('click', ++clickCount, 'time(s)');
    if (cur_i < totalCollections - 1) {
      cur_i = parseInt(
        $(
          `.mb-bottom-2 .content .content-question .question-context:visible`
        ).attr('order')
      );

      $(
        `.mb-bottom-2 .content .content-question .question-context:eq(${cur_i})`
      ).hide();

      $(
        `.mb-bottom-2 .content .content-question .question-context:eq(${
          cur_i + 1
        })`
      ).fadeIn(1000);

      cur_i = parseInt($(`.question-context:visible`).attr('order'));

      $(`.mb-bottom-2 .sb-box-2 .rect-box`).removeClass('box-selected');

      $(`.mb-bottom-2 .sb-box-2 .rect-box:eq(${cur_i})`).addClass(
        'box-selected'
      );

      toShowAnalysis2();

      return true;
    } else {
      alert('已经是最后一题');

      toShowAnalysis2();

      return false;
    }
  });

  // * 跳到上一题
  // let clickCount = 0;
  $('.mb-bottom-2 .btn-last-question').click(function () {
    // console.log('click', ++clickCount, 'time(s)');
    if (cur_i > 0) {
      cur_i = parseInt(
        $(
          `.mb-bottom-2 .content .content-question .question-context:visible`
        ).attr('order')
      );

      $(
        `.mb-bottom-2 .content .content-question .question-context:eq(${cur_i})`
      ).hide();

      $(
        `.mb-bottom-2 .content .content-question .question-context:eq(${
          cur_i - 1
        })`
      ).fadeIn(1000);

      cur_i = parseInt($(`.question-context:visible`).attr('order'));

      $(`.mb-bottom-2 .sb-box-2 .rect-box`).removeClass('box-selected');

      $(`.mb-bottom-2 .sb-box-2 .rect-box:eq(${cur_i})`).addClass(
        'box-selected'
      );

      toShowAnalysis2();

      return true;
    } else {
      alert('已经是第一道');

      toShowAnalysis2();

      return false;
    }
  });

  // * 是否默认开启解析
  $('.mb-bottom-2 .sb-row-2 input').click(function () {
    if (
      $(
        '.mb-bottom-2 .content .content-question .question-context:visible .question-detail'
      ).is(':visible')
    ) {
      $(
        '.mb-bottom-2 .content .content-question .question-context:visible .question-detail'
      ).hide();
    } else {
      $(
        '.mb-bottom-2 .content .content-question .question-context:visible .question-detail'
      ).show();
    }
  });

  // * 取消收藏
  $('.mb-bottom-2 .btn-cancel-collection').click(async function () {
    const studentId = userId;

    const exerciseId = $(
      '.mb-bottom-2 .content .content-question .question-context:visible'
    ).attr('exercise-id');

    const testId = $(
      '.mb-bottom-2 .content .content-question .question-context:visible'
    ).attr('test-id');

    const errorId = $(
      '.mb-bottom-2 .content .content-question .question-context:visible'
    ).attr('error-id');

    let { code, data, message } = await getPromise(
      '/collectionsRouter/delete',
      'post',
      {
        studentId,
        exerciseId,
        testId,
        errorId,
      }
    );

    alert(message);

    getCollectionsAndRender();
  });
}

function toShowAnalysis2() {
  if ($('.mb-bottom-2 .sb-row-2 input').is(':checked')) {
    $(
      '.mb-bottom-2 .content .content-question .question-context:visible .question-detail'
    ).show();
  } else {
    $(
      '.mb-bottom-2 .content .content-question .question-context:visible .question-detail'
    ).hide();
  }
}

// * 首页错题库功能
$('.tabs [class^="tab-"]:eq(2)').click(async function () {
  getErrorsAndRender();
});

async function getErrorsAndRender() {
  $('.mb-bottom-3 .content .content-question').html('');
  $('.mb-bottom-3 .sidebar .sb-box-2').html('');

  const users = JSON.parse(localStorage.getItem('users'));
  const userId = users.find((user) => user.status === 'online')._id;

  let {
    code,
    data: errors,
    message,
  } = await getPromise('/errorsRouter/:' + userId, 'get', {});

  // console.log(errors);

  const totalErrors = errors.length;

  // * 渲染总错题数
  $('.num-wrong-questions').text(totalErrors);
  for (let i = 0; i < totalErrors; i++) {
    $('.mb-bottom-3 .sb-box-2').append(
      `<div class="rect-box" boxnum="${i}">${i + 1}</div>`
    );
  }

  errors = errors.map((error) => {
    switch (error.errorAnswer) {
      case -1:
        error.errorAnswer = '空';
        return error;
      case 0:
        error.errorAnswer = 'A';
        return error;
      case 1:
        error.errorAnswer = 'B';
        return error;
      case 2:
        error.errorAnswer = 'C';
        return error;
      case 3:
        error.errorAnswer = 'D';
        return error;
    }
  });

  errors = errors.map((error) => {
    switch (error.exerciseId.answer) {
      case 0:
        error.exerciseId.answer = 'A';
        return error;
      case 1:
        error.exerciseId.answer = 'B';
        return error;
      case 2:
        error.exerciseId.answer = 'C';
        return error;
      case 3:
        error.exerciseId.answer = 'D';
        return error;
    }
  });

  for (let i = 0; i < totalErrors; i++) {
    $('.mb-bottom-3 .content .content-question').append(`

         <div class="question-context" order="${i}" exercise-id="${errors[i].exerciseId._id}" test-id="${errors[i].testId}" error-id="${errors[i]._id}">

            <h5 class="question-text">
                ${errors[i].exerciseId.topics}
            </h5>
                    <ul class="answers">
                        <li answerIndex="0">
                            <div class="circle-box">A</div>
                            <span class="answer-text">${errors[i].exerciseId.options[0]}</span>
                        </li>
                        <li answerIndex="1">
                            <div class="circle-box">B</div>
                            <span class="answer-text">${errors[i].exerciseId.options[1]}</span>
                        </li>
                        <li answerIndex="2">
                            <div class="circle-box">C</div>
                            <span class="answer-text">${errors[i].exerciseId.options[2]}</span>
                        </li>
                        <li answerIndex="3">
                            <div class="circle-box">D</div>
                            <span class="answer-text">${errors[i].exerciseId.options[3]}</span>
                        </li>
                    </ul>

                     <div class="question-detail">
                        <ul id="qd-items">
                            <li>考生答案：</li>
                            <li>正确答案：</li>
                            <li>解析：</li>
                        </ul>
                        <ul>
                            <li class='user-answer wrong'>${errors[i].errorAnswer}</li>
                            <li class="correct-answer correct">${errors[i].exerciseId.answer}</li>
                            <li>
                                ${errors[i].exerciseId.analysis}
                            </li>
                        </ul>
                     </div>

        </div>

        

      `);
  }

  $('.mb-bottom-3 .content .content-question').append(`
        <div class="cq-box">
          <div class="cq-row-2">
              <button class="btn-add-collection">添加收藏</button>
              <button class="btn-question-learnt">标记已学会</button>
              <button class="btn-last-question">上一题</button>
              <button class="btn-next-question">下一题</button>
          </div>
      </div>`);

  $(
    '.mb-bottom-3 .content .content-question .question-context:not(:eq(0))'
  ).hide();

  toShowAnalysis();

  let cur_i = $(
    `.mb-bottom-3 .content .content-question .question-context:visible`
  ).attr('order'); // * 当前所在题目的下标

  $(`.mb-bottom-3 .sb-box-2 .rect-box`).removeClass('box-selected');
  $(`.mb-bottom-3 .sb-box-2 .rect-box:eq(${cur_i})`).addClass('box-selected');

  // * 跳到指定题目
  $('body').on('click', '.mb-bottom-3 .sb-box-2 .rect-box', function () {
    //   cur_i = parseInt($(`.question-context:visible`).attr('order'));

    cur_i = parseInt($(this).attr('boxnum')); // 点击右侧边栏的小盒子所对应的题目下标

    $(`.mb-bottom-3 .content .content-question .question-context`).hide();
    $(
      `.mb-bottom-3 .content .content-question .question-context:eq(${cur_i})`
    ).fadeIn(200);

    $(`.mb-bottom-3 .sb-box-2 .rect-box`).removeClass('box-selected');
    $(`.mb-bottom-3 .sb-box-2 .rect-box:eq(${cur_i})`).addClass('box-selected');

    toShowAnalysis();
  });

  // * 跳到下一题
  // let clickCount = 0;
  $('.mb-bottom-3 .btn-next-question').click(function () {
    // console.log('click', ++clickCount, 'time(s)');
    if (cur_i < totalErrors - 1) {
      cur_i = parseInt(
        $(
          `.mb-bottom-3 .content .content-question .question-context:visible`
        ).attr('order')
      );

      $(
        `.mb-bottom-3 .content .content-question .question-context:eq(${cur_i})`
      ).hide();

      $(
        `.mb-bottom-3 .content .content-question .question-context:eq(${
          cur_i + 1
        })`
      ).fadeIn(1000);

      cur_i = parseInt($(`.question-context:visible`).attr('order'));

      $(`.mb-bottom-3 .sb-box-2 .rect-box`).removeClass('box-selected');

      $(`.mb-bottom-3 .sb-box-2 .rect-box:eq(${cur_i})`).addClass(
        'box-selected'
      );

      toShowAnalysis();

      return true;
    } else {
      alert('已经是最后一题');

      toShowAnalysis();

      return false;
    }
  });

  // * 跳到上一题
  // let clickCount = 0;
  $('.mb-bottom-3 .btn-last-question').click(function () {
    // console.log('click', ++clickCount, 'time(s)');
    if (cur_i > 0) {
      cur_i = parseInt(
        $(
          `.mb-bottom-3 .content .content-question .question-context:visible`
        ).attr('order')
      );

      $(
        `.mb-bottom-3 .content .content-question .question-context:eq(${cur_i})`
      ).hide();

      $(
        `.mb-bottom-3 .content .content-question .question-context:eq(${
          cur_i - 1
        })`
      ).fadeIn(1000);

      cur_i = parseInt($(`.question-context:visible`).attr('order'));

      $(`.mb-bottom-3 .sb-box-2 .rect-box`).removeClass('box-selected');

      $(`.mb-bottom-3 .sb-box-2 .rect-box:eq(${cur_i})`).addClass(
        'box-selected'
      );

      toShowAnalysis();

      return true;
    } else {
      alert('已经是第一道');

      toShowAnalysis();

      return false;
    }
  });

  // * 是否默认开启解析
  $('.mb-bottom-3 .sb-row-2 input').click(function () {
    if (
      $(
        '.mb-bottom-3 .content .content-question .question-context:visible .question-detail'
      ).is(':visible')
    ) {
      $(
        '.mb-bottom-3 .content .content-question .question-context:visible .question-detail'
      ).hide();
    } else {
      $(
        '.mb-bottom-3 .content .content-question .question-context:visible .question-detail'
      ).show();
    }
  });

  // * 添加收藏
  $('.mb-bottom-3 .btn-add-collection').click(async function () {
    const exerciseId = $(
      '.mb-bottom-3 .content .content-question .question-context:visible'
    ).attr('exercise-id');
    const testId = $(
      '.mb-bottom-3 .content .content-question .question-context:visible'
    ).attr('test-id');
    const errorId = $(
      '.mb-bottom-3 .content .content-question .question-context:visible'
    ).attr('error-id');

    const studentId = userId;
    let { code, data, message } = await getPromise(
      '/collectionsRouter',
      'post',
      {
        studentId,
        exerciseId,
        testId,
        errorId,
      }
    );

    alert(message);
  });

  // * 标记已学会
  $('.mb-bottom-3 .btn-question-learnt').click(async function () {
    const exerciseId = $(
      '.mb-bottom-3 .content .content-question .question-context:visible'
    ).attr('exercise-id');
    const testId = $(
      '.mb-bottom-3 .content .content-question .question-context:visible'
    ).attr('test-id');

    let { code, data, message } = await getPromise(
      '/errorsRouter/delete',
      'post',
      {
        userId,
        exerciseId,
        testId,
      }
    );

    // console.log(data);

    getErrorsAndRender();
  });
}

function toShowAnalysis() {
  if ($('.mb-bottom-3 .sb-row-2 input').is(':checked')) {
    $(
      '.mb-bottom-3 .content .content-question .question-context:visible .question-detail'
    ).show();
  } else {
    $(
      '.mb-bottom-3 .content .content-question .question-context:visible .question-detail'
    ).hide();
  }
}

$('.ranking').click(async function () {
  let {
    code,
    data: tests,
    message,
  } = await getPromise('/testsRouter/', 'get', {});

  let {
    code: code1,
    data: testeds,
    message: message1,
  } = await getPromise('/testedsRouter/all', 'get', {});
  // const testTitles = tests.map((test) => test.title);

  for (let test of tests) {
    $('#ranking-sel').append(
      `<option value="${test._id}">${test.title}</option>`
    );
  }

  $('#ranking-sel').on('click', function () {
    $('.ol-ranking').html('');

    const testId = $(this).val();

    // * 当前登录用户ID
    const users = JSON.parse(localStorage.getItem('users'));
    const userId = users.find((user) => user.status === 'online')._id;

    let testedsById = testeds.filter((tested) => tested.testId._id === testId);

    if (testedsById.length > 0) {
      testedsById = testedsById.sort((a, b) => b.score - a.score);

      for (let i = 0; i < testedsById.length; i++) {
        $('.ol-ranking').append(
          `<li sid="${testedsById[i].studentId._id}"><span>${
            i + 1
          }. &nbsp; <span class="sname">
           <img src="${testedsById[i].studentId.avatar}" alt=""> &nbsp;
          ${testedsById[i].studentId.name}</span></span> <span>${
            testedsById[i].score
          } 分</span></li>`
        );

        $('.ol-ranking li').each(function () {
          if ($(this).attr('sid') === userId) {
            $(this).children().children().css('color', 'red');
          }
        });

        // console.log($('.ol-ranking li'));
      }
    }
  });

  $('.ranking-modal').show();
});
